<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-06-21 16:36:53
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-08-27 14:48:32
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\EquipManage\EquipType\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { BaseButton } from '@/components/Button'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ref, unref, watch, reactive } from 'vue'
import { ElTree, ElInput, ElEmpty } from 'element-plus'
import SCADAApi from '@/api/scada'
import { useSearch } from '@/hooks/web/useSearch'
import { HistorySearchParams } from './components/type'
import { SheetComponent } from '@antv/s2-vue'
import { MonthReport, Tree } from './components/report'
import '@antv/s2/dist/style.min.css'
const { dataCfg, options, PublicFun, ExcelTable, Date, s2 } = MonthReport()
const { treeEl, currentNodeKey, departmentList, fetchDepartment } = Tree()
const { t } = useI18n()
fetchDepartment() //获取树结构
const currentDepartment = ref('') //树结构搜索框内容
watch(
  () => currentDepartment.value, //监控树结构搜索框内容变化
  (val) => {
    unref(treeEl)!.filter(val)
  }
)
const searchParams = ref<HistorySearchParams | any>(null)
const { searchRegister, searchMethods } = useSearch()
const { setValues } = searchMethods
const currentChange = (data: any) => {
  //树结构点击
  currentNodeKey.value = data.deviceNo
  setValues(data)
}
const filterNode = (value: string, data: any) => {
  //树结构变化
  if (!value) return true
  return data.siteName.includes(value) || data.deviceNo.includes(value)
}
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'siteName',
    label: t('选择站点'),
    component: 'Input',
    value: '全部站点',
    componentProps: {
      disabled: true,
      placeholder: '选择站点'
    }
  },
  {
    field: 'date',
    label: t('时间范围'),
    component: 'DatePicker',
    componentProps: {
      type: 'month',
      valueFormat: 'YYYY-MM',
      placeholder: '请输入查询日期'
    }
  }
])
const Show = ref(false)
const setSearchParams = async (data: any) => {
  Date.value = data.date
  Show.value = true
  if (data.deviceNo == 'all' || data.deviceNo == undefined) {
    data.deviceNo = 'all'
    searchParams.value = { date: data.date, devNumber: null }
  } else {
    searchParams.value = { date: data.date, devNumber: data.deviceNo }
  }
  const res = await SCADAApi.GetMarMonthReport(searchParams.value)
  PublicFun(res, data.deviceNo)
}
</script>
<template>
  <div class="flex w-100% h-100%">
    <ContentWrap class="w-250px min-h-[580px]" title="站点选择">
      <ElInput
        v-model="currentDepartment"
        class="flex-[2] mb-[10px]"
        :placeholder="t('搜索站点名称/编号')"
        clearable
      />
      <ElTree
        ref="treeEl"
        :data="departmentList"
        default-expand-all
        :expand-on-click-node="false"
        node-key="deviceNo"
        :current-node-key="currentNodeKey"
        :props="{
          label: 'siteName'
        }"
        :filter-node-method="filterNode"
        @current-change="currentChange"
      >
        <template #default="{ data }">
          <div :title="data.siteName" class="whitespace-nowrap overflow-ellipsis overflow-hidden">
            {{ data.siteName }}
          </div>
        </template>
      </ElTree>
    </ContentWrap>
    <ContentWrap class="flex-[3] ml-20px" title="日报表统计">
      <Search
        :schema="searchSchema"
        @search="setSearchParams"
        @register="searchRegister"
        @reset="setSearchParams"
      />
      <BaseButton
        size="small"
        type="primary"
        class="AddbtnStyle"
        v-if="dataCfg"
        @click="ExcelTable"
      >
        <Icon class="mr-[5px]" icon="ep:download" :size="12" />下载
      </BaseButton>
      <div v-if="dataCfg" class="sheet-container">
        <SheetComponent ref="s2" :dataCfg="dataCfg" :options="options" />
      </div>
      <ElEmpty v-else description="暂无数据" />
    </ContentWrap>
  </div>
</template>
<style scoped lang="less">
:deep(.el-scrollbar__view) {
  height: 100%;
}
.sheet-container {
  height: 70%;
}
.el-tree-node:focus > .el-tree-node__content {
  color: #409eff;
}
:deep(.el-range-editor--small) {
  height: 29px !important;
}
.el-card__body {
  padding: 10px;
  /* height: 90%; */
}
.CloseBtn {
  font-weight: 600;
  margin: 0 3px;
  color: darkgrey;
}
.AddbtnStyle {
  margin-bottom: 18px;
  margin-right: 10px;
}
.el-collapse-item {
  padding: 15px 0;
}
.el-collapse-item__content {
  padding-bottom: 0;
}
.el-collapse-item__header {
  width: 62px;
  height: 24px;
  border-radius: 2px;
  color: white;
  background: #409eff;
  justify-content: center;
  font-size: 12px;
}
.el-collapse-item__arrow {
  margin: 0 2px;
}

:deep(.TableBtn) {
  margin: 0 5px;
  cursor: pointer;
  color: #409eff;
  font-weight: 600;
}
</style>
